<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true" @submit.native.prevent>
      <el-row>
        <el-col :span="20">
          <!-- <el-form-item label="任务单号:">
            <el-input v-model="searchForm.jobId" style="width:165px" placeholder="任务单号" />
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="searchForm.projectName" style="width:165px" placeholder="项目名称" />
          </el-form-item> -->

          <el-form-item>
            <el-input
              v-model="searchForm.fuzzy"
              style="width:350px"
              placeholder="项目名称/合同编号/委托单位/委托人/任务单号"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="iconfont icon-chaxun1"
              @click="handleSearch"
            >
              查询</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="4" class="search-right">
          <el-button type="text" icon="el-icon-refresh" @click="handleSearch"
            >刷新</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        ref="stockTable"
        stripe
        border
        :data="taskData"
        class="table-item"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span>
                暂无任务信息
              </span>
            </div>
          </div>
        </template>
        <el-table-column
          fixed="left"
          type="index"
          width="50"
          align="center"
          label="序号"
        />
        <el-table-column
          prop="contCode"
          label="合同编号"
          align="center"
        />
        <el-table-column
          prop="projectName"
          label="项目名称"
          align="center"
        />
        <el-table-column
          prop="consignorName"
          label="委托单位"
          align="center"
        />
        <el-table-column
          prop="consignorLinker"
          label="委托人"
          align="center"
        />
        <!-- <el-table-column
          prop="inspectionName"
          label="受检单位"
          width="250px"
          align="center"
        /> -->
        <el-table-column
          prop="id"
          label="任务单号"
          align="center"
        >
          <div slot-scope="{ row }">
            <div v-for="item in row.scheduleJobPreviewDetailVos" :key="item.id">
              <div
                style="border:1px solid #e6ebf5;margin: -1px -11px -1px -11px;padding-top: 5px;padding-bottom: 2px;"
              >
                {{ item.jobId }}
              </div>
            </div>
          </div>
        </el-table-column>

        <!-- <el-table-column
          label="客户要求领取报告日期"
          width="210px"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.startDate }} ~ {{ row.endDate }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="id"
          label="客户要求领取报告日期"
          align="center"
        >
          <div slot-scope="{ row }">
            <div v-for="item in row.scheduleJobPreviewDetailVos" :key="item.id">
              <div
                style="border:1px solid #e6ebf5;margin: -1px -11px -1px -11px;padding-top: 5px;padding-bottom: 2px;"
              >
                {{ item.endDate }}
              </div>
            </div>
          </div>
        </el-table-column>

        <!-- <el-table-column label="进度" align="center" width="140px">
          <template slot="header">
            <span slot="label">
              进度
              <el-popover
                placement="top-start"
                title=""
                width="300"
                trigger="hover"
                content="绿色圆代表该事项已完成;黄色圆代表该事项正在进行;灰色圆代表该事项未开始"
              >
                <svg-icon
                  slot="reference"
                  icon-class="help"
                  style="font-size:16px"
                />
              </el-popover>
            </span>
          </template>
          <template slot-scope="{ row }">
            <div @mousedown="showInfos(row)">
              <div v-if="row.taskStatus === '1'">
                <el-progress
                  color="#11b95c"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="row.process"
                />
              </div>
              <div v-if="row.taskStatus === '0'">
                <el-progress
                  color="#ffba00"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="row.process"
                />
              </div>
            </div>
          </template>
        </el-table-column> -->
        <!--        <el-table-column prop="taskStatus" label="状态" align="center">-->
        <!--          <template slot-scope="{row}">-->
        <!--            <el-tag :type="row.taskStatus==='1'?'success':'primary'">{{ row.taskStatus==='1'?'已完成':'未开始' }}</el-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <!-- <el-table-column
          prop="createTime"
          width="155px"
          label="创建时间"
          align="center"
        /> -->

        <el-table-column
          prop="id"
          label="创建时间"
          align="center"
        >
          <div slot-scope="{ row }">
            <div v-for="item in row.scheduleJobPreviewDetailVos" :key="item.id">
              <div
                style="border:1px solid #e6ebf5;margin: -1px -11px -1px -11px;padding-top: 5px;padding-bottom: 2px;"
              >
                {{ item.createTime }}
              </div>
            </div>
          </div>
        </el-table-column>

        <el-table-column
          prop="id"
          label="任务状态"
          align="center"
        >
          <div slot-scope="{ row }">
            <div v-for="item in row.scheduleJobPreviewDetailVos" :key="item.id">
              <div
                style="border:1px solid #e6ebf5;margin: -1px -11px -1px -11px;padding-top: 5px;padding-bottom: 2px;"
              >
                <span
                  v-if="item.taskType == 0"
                  style="background: #4278BA;padding: 7px 15px; border-radius: 5px;color: #fff;"
                  >进行中</span
                >
                <span
                  v-if="item.taskType == 1"
                  style="background: #35CE76;padding: 7px 15px;border-radius: 5px;color: #fff;"
                  >已完成</span
                >
              </div>
            </div>
          </div>
        </el-table-column>

        <!-- <el-table-column
          fixed="right"
          label="操作"
          width="110px"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleDetail(row)">详情</el-button>
            <div class="erc-divider-vertical" />
            <el-button
              type="text"
              v-if="row.taskStatus !== '1'"
              @click="retractsSchedulesJob(row.jobId, row.offerPlanIds)"
              v-permission="rolesKey"
              >撤回</el-button
            >
          </template>
        </el-table-column> -->

        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="230px"
        >
          <div slot-scope="{ row }">
            <div v-for="item in row.scheduleJobPreviewDetailVos" :key="item.id">
              <div
                style="border:1px solid #e6ebf5;margin: -1px -11px -1px -11px;padding-top: 5px;padding-bottom: 2px;"
              >
                <el-button type="text" @click="handleDetail(item)"
                  >查看任务进度</el-button
                >
                <div class="erc-divider-vertical" />
                <el-button
                  type="text"
                  v-if="row.taskStatus !== '1'"
                  @click="retractsSchedulesJob(item)"
                  v-permission="rolesKey"
                  >下载项目合同</el-button
                >
              </div>
            </div>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>
    <el-dialog title="任务进度表" :visible.sync="taskInfosVisible">
      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activitieModel"
            :key="index"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>

    <el-dialog title="因子调度详情" :visible.sync="factorVisible" width="80%">
      <el-table :data="factorData" border stripe>
        <el-table-column type="index" width="50" align="center" label="序号" />
        <el-table-column
          prop="secdClassName"
          label="检测类别"
          min-width="110px"
          align="center"
        />
        <el-table-column
          prop="factorName"
          label="检测因子"
          min-width="200"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.factorName
            }}<span style="color: red;">{{
              row.meanName && row.meanName.length > 0
                ? "(" + row.meanName + ")"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="factorPoint" label="检测位置" align="center" />
        <el-table-column prop="frequency" label="频次(次/天)" align="center" />
        <el-table-column prop="dayCount" label="天数" align="center" />
        <el-table-column label="次数" align="center">
          <template slot-scope="{ row }">
            {{ Number(row.dayCount * row.frequency) }}
          </template>
        </el-table-column>
        <el-table-column label="是否合样" align="center">
          <template slot-scope="{ row }">
            {{ row.hyFlag === "1" ? "Y" : "N" }}
          </template>
        </el-table-column>
        <el-table-column label="是否分包" align="center">
          <template slot-scope="{ row }">
            {{ row.fbFlag === "1" ? "Y" : "N" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="factorRemark"
          label="备注"
          min-width="110"
          align="center"
        />
      </el-table>
    </el-dialog>

    <!--采样、检测未开始-->
    <el-dialog
      :visible.sync="retractsVisibleOne"
      width="26%"
      :close-on-click-modal="false"
    >
      <div
        style="font-size: 18px;color: red;margin-top: -38px;margin-bottom: 18px;text-align: center;"
      >
        谨慎操作
      </div>
      <div style="font-size: 15px;">
        <span>撤回任务后，该任务将被撤回到计划中，是否继续？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="retractsVisibleOne = false">取消</el-button>
        <el-button type="primary" @click="retractsDefine()">确认</el-button>
      </div>
    </el-dialog>
    <!--采样、检测进行中-->
    <el-dialog
      :visible.sync="retractsVisibleTwo"
      width="26%"
      :close-on-click-modal="false"
    >
      <div
        style="font-size: 18px;color: red;margin-top: -38px;margin-bottom: 18px;text-align: center;"
      >
        谨慎操作
      </div>
      <div style="font-size: 15px;">
        <span>{{ titleTwo }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="retractsVisibleTwo = false">知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as taskServer from "@/api/task";
import Pagination from "@/components/Pagination";
import * as sampleServer from "@/api/sample";
import { retractsScheduleJob, retractsScheduleJobTwo } from "@/api/task";
import { mapGetters } from "vuex";

export default {
  components: { Pagination },
  data() {
    return {
      taskData: [],
      rolesKey: [],
      searchForm: {
        fuzzy: "",
        jobId: "",
        projectName: "",
        pageNumber: 1,
        pageSize: 10
      },
      titleOne: "",
      titleTwo: "",
      jobId: null,
      offerPlanIds: [],
      retractsVisibleOne: false,
      retractsVisibleTwo: false,
      total: 0,
      activitieModel: [],
      taskInfosVisible: false,
      factorData: [],
      factorVisible: false
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  created() {
    this.handleSearch();
    this.rolesKey = this.userInfo.roles;
  },
  methods: {
    handleSearch() {
      taskServer.findScheduleJobPreviewHis(this.searchForm).then(res => {
        if (res.code === 200) {
          this.taskData =
            res.result.records.map(i => {
              if (i.reportStatus !== "" && i.reportStatus === "6") {
                this.$set(i, "taskStatus", "1");
              } else {
                this.$set(i, "taskStatus", "0");
              }
              this.doProcessList(i);
              return i;
            }) || [];
          this.total = res.result.total;
        }
      });
    },
    doProcessList(item) {
      var activities = [
        {
          name: "任务单",
          content: "任务单",
          timestamp: "",
          size: "normal",
          type: "success"
        },
        {
          name: "采样",
          content: "采样",
          timestamp: "",
          size: "normal",
          type: "info"
        },
        {
          name: "检测",
          content: "检测",
          timestamp: "",
          size: "normal",
          type: "info"
        },
        {
          name: "报告生成",
          content: "报告生成",
          timestamp: "",
          size: "normal",
          type: "info"
        },
        {
          attr: "报告审核",
          content: "报告审核",
          timestamp: "",
          size: "normal",
          type: "info"
        },
        {
          attr: "报告签发",
          content: "报告签发",
          timestamp: "",
          size: "normal",
          type: "info"
        }
      ];
      var startNum = 1;
      if (item.isSampled === "1") {
        activities[1].type = "success";
        startNum++;
      }
      if (item.isChecked === "1") {
        activities[2].type = "success";
        startNum++;
      }
      if (item.reportStatus >= 1 && item.reportStatus !== 7) {
        activities[3].type = "success";
        startNum++;
      }
      if (item.reportStatus >= 4 && item.reportStatus !== 7) {
        activities[4].type = "success";
        startNum++;
      }
      if (item.reportStatus >= 5 && item.reportStatus !== 7) {
        activities[5].type = "success";
        startNum++;
      }

      if (startNum >= 1 && startNum < 3) {
        activities[1].type = "warning";
        activities[2].type = "warning";
      }
      if (startNum >= 3) {
        activities[1].type = "success";
        activities[2].type = "success";
        activities[3].type = "warning";
        if (startNum === 4) {
          activities[3].type = "success";
          activities[4].type = "warning";
        } else if (startNum === 5) {
          activities[3].type = "success";
          activities[4].type = "success";
          activities[5].type = "warning";
        } else if (startNum === 6) {
          activities[3].type = "success";
          activities[4].type = "success";
          activities[5].type = "success";
        }
      }

      this.$set(item, "infoList", activities);
      this.$set(
        item,
        "process",
        parseInt(Number((startNum / 6) * 100).toFixed(0))
      );
    },
    showInfos(row) {
      this.activitieModel = [];
      this.activitieModel = row.infoList;
      this.taskInfosVisible = true;
    },

    // 合同下载
    retractsSchedulesJob(item) {
      if (item.contFileId != "" || item.contFileId != null) {
        var url =
          this.$store.getters.sysBaseUrl + "/file/ht/upload/" + item.contFileId;
        window.open(url);
      } else {
        this.$message.warning("合同生成异常，请联系管理员");
      }
    },

    // 确定撤回
    retractsDefine() {
      const jobId = { jobId: this.jobId, offerPlanIds: this.offerPlanIds };
      taskServer.retractsScheduleJob(jobId).then(result => {
        if (result.code === 200) {
          this.$notify({
            title: "成功",
            message: result.message,
            type: "success"
          });
          this.handleSearch();
        } else {
          this.$notify({
            title: "失败",
            message: result.message,
            type: "error"
          });
        }
      });
      this.retractsVisibleOne = false;
    },

    handleDetail(row) {
      this.$router.push({
        path: "/other/progressdata",
        query: {
          jobId: row.jobId,
          checkType: row.checkType
        }
      });
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.search_div {
  > div {
    &:nth-child(1) {
      margin-right: 10px;
    }
    display: inline-block;
  }
}

.search_input {
  width: 200px;
  margin-bottom: 5px;
}
.search-right {
  text-align: right;
  padding-right: 25px;
}
.item {
  font-size: 16px;
}
::v-deep .el-card .el-card__header {
  padding: 5px 20px;
  background: #d3d3d3;
}
.block-flex {
  position: relative;
  display: flex;
  & > div {
    border: 1px solid #b7b7b7;
    width: 100px;
    margin: 0;
    line-height: 30px;
    text-align: center;
  }
  & > div:first-child {
    background: #b7b7b7;
  }
}
.card-left {
  width: 100%;
  min-height: 200px;
  max-height: 400px;
}
.card-right {
  width: 100%;
  min-height: 200px;
  max-height: 400px;
}
.el-card {
  overflow: auto;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-table__header-wrapper .el-checkbox {
  display: none;
}
.info-table-new {
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  border-top: 1px solid #ececec;
  border-left: 1px solid #ececec;
  line-height: 35px;
  td {
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    width: 25%;
    height: 35px;
    // &:nth-child(2n + 1) {
    //   width: 25%;
    //   background: #f5f5f5;
    // }
  }
}
::v-deep .el-table .cell {
  line-height: 36px;
}
</style>

<style scoped>
table {
  background-color: transparent;
}

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: middle;
  border-top: 1px solid #ddd;
}

.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table > caption + thead > tr:first-child > td,
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > td,
.table > thead:first-child > tr:first-child > th {
  border-left: 1px solid #f1f2f4;
}

.table > tbody + tbody {
  border-top: 2px solid #ddd;
}

.table .table {
  background-color: #fff;
}

.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
  padding: 5px;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid #ddd;
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border-bottom-width: 2px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}

table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > thead > tr.active > th,
.table > thead > tr > td.active,
.table > thead > tr > th.active {
  background-color: #f5f5f5;
}

.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr.active:hover > th,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover {
  background-color: #e8e8e8;
}

.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tfoot > tr.success > td,
.table > tfoot > tr.success > th,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > thead > tr.success > th,
.table > thead > tr > td.success,
.table > thead > tr > th.success {
  background-color: #dff0d8;
}

.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr.success:hover > th,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover {
  background-color: #d0e9c6;
}

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info,
.table > tfoot > tr.info > td,
.table > tfoot > tr.info > th,
.table > tfoot > tr > td.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > thead > tr.info > th,
.table > thead > tr > td.info,
.table > thead > tr > th.info {
  background-color: #d9edf7;
}

.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover {
  background-color: #c4e3f3;
}

.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > thead > tr.warning > th,
.table > thead > tr > td.warning,
.table > thead > tr > th.warning {
  background-color: #fcf8e3;
}

.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr.warning:hover > th,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover {
  background-color: #faf2cc;
}

.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr.danger > td,
.table > tfoot > tr.danger > th,
.table > tfoot > tr > td.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > thead > tr.danger > th,
.table > thead > tr > td.danger,
.table > thead > tr > th.danger {
  background-color: #f2dede;
}

.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr.danger:hover > th,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover {
  background-color: #ebcccc;
}

.table-responsive {
  min-height: 3.01%;
  overflow-x: auto;
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid #e9ecef;
  text-align: center;
}

.table-bordered,
td,
th {
  border-radius: 0 !important;
}

.table-bordered > tbody > tr:last-child > td {
  border-bottom: 1px solid #e9ecef;
}

.bootstrap-table .fixed-table-container .fixed-table-header {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.fixed-table-header .table > thead > tr {
  background: none !important;
}

.table > thead > tr {
  color: #636363;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.05);
  /*   background: repeat-x #fafafa;
  background-image: -webkit-linear-gradient(top,#F8F8F8 0,#fafafa 100%);
  background-image: -o-linear-gradient(top,#F8F8F8 0,#fafafa 100%);
  background-image: linear-gradient(to bottom,#F8F8F8 0,#fafafa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0); */
}

.table > thead > tr > th {
  border-color: #e9ecef;
  font-weight: 700;
  border-right-color: transparent;
}

.table > thead > tr > th .ace-icon:first-child {
  margin-right: 2px;
}

.table > thead > tr > th:first-child {
  border-left-color: #f1f1f1;
}

.table > thead > tr > th:last-child {
  border-right-color: #f1f1f1;
}

.table.table-bordered > thead > tr > th {
  vertical-align: middle;
}

td.center,
th.center {
  text-align: center;
}

td .lbl,
th .lbl {
  margin-bottom: 0;
}

td .lbl:only-child,
th .lbl:only-child {
  vertical-align: top;
}

.table-header {
  background-color: #307ecc;
  color: #fff;
  font-size: 14px;
  line-height: 38px;
  padding-left: 12px;
  margin-bottom: 1px;
}

.table-header .close {
  margin-right: 8px;
  margin-top: 0;
  opacity: 0.45;
  filter: alpha(opacity=45);
}

.table-header .close:hover {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

th.detail-col {
  width: 48px;
  text-align: center;
}

tr.detail-row {
  display: none;
}

tr.detail-row.open {
  display: block;
  display: table-row;
}

tr.detail-row > td {
  background-color: #f1f6f8;
  border-top: 3px solid #d1e1ea !important;
}

.table-detail {
  background-color: #fff;
  border: 1px solid #dcebf7;
  width: 100%;
  padding: 12px;
}

.table-detail td > .profile-user-info {
  width: 100%;
}
</style>
